<template>
  <view class="goods-attribute" :style="[outModuleCss]">
    <view :style="[moduleBgCss]" class="module-bg"></view>
    <view class="attribute-section">
      <!-- sku选择 -->
      <view class="sku-row" v-if="productType == 0 || productType == 3" @click="chooseSku">
        <view class="row-label">{{$t('goods.choosedSku')}}</view>
        <view class="row-content">
          <view class="selected-sku">{{ skuText }}</view>
          <i class="iconfont icon-arrow-right"></i>
        </view>
      </view>
      <view
        class="split-line"
        v-if="(showAddress || showNearbyShop) && productType == 0"
      ></view>
      <!-- 送至地址 -->
      <view
        class="address-row"
        v-if="showAddress"
        @click="gotoAddressList"
        :style="!address ? 'align-items: flex-start' : ''"
      >
        <view class="row-label">{{$t('goods.send')}}</view>
        <view :class="['row-content', !address ? 'add-bottom' : '']">
          <view :class="['address-info']">
            <i class="iconfont icon-a-map"></i>
            <text v-if="!address">{{$t('diy.chooseAddress')}}</text>
            <view class="info-text" v-else
              >{{ address.province }} {{ address.city }} {{ address.district }}
              {{ address.detail }}</view
            >
            <!--  -->
          </view>
          <i class="iconfont icon-arrow-right"></i>
        </view>
      </view>
      <!-- 地址详情 -->
      <view class="send-info" v-if="showAddress && address">
        <view class="row-label"></view>
        <view class="row-content">
          <span>{{$t('diy.waiting')}}</span>
        </view>
      </view>
      <view
        class="split-line"
        v-if="showAddress && showNearbyShop && shop"
      ></view>
      <!-- 门店 -->
      <view
        class="shop-info"
        v-if="showNearbyShop && shop && mdId == 0"
        @click="$utils.toUrl('/pages/shop-nearby/shop-nearby?is_order=1')"
      >
        <view class="row-label">{{$t('goods.shop')}}</view>
        <view class="row-content">
          <view class="shop-msg">
            <view class="top-msg">
              <i class="iconfont icon-store"></i>
              <text>{{ shop.name }}</text>
            </view>
            <i class="iconfont icon-arrow-right"></i>
          </view>
          <view class="address-detail">
            {{ shop.address }}
          </view>
        </view>
      </view>

      <view class="shop-info" v-if="showNearbyShop && mdId != 0">
        <view class="row-label">{{$t('goods.shop')}}</view>
        <view class="row-content">
          <view class="shop-msg">
            <view class="top-msg">
              <i class="iconfont icon-store"></i>
              <text>{{ mdData.name }}</text>
            </view>
          </view>
          <view class="address-detail" v-if="mdData.address">
            <text class="distance" v-if="mdData.distance"
              >{{$t('diy.distance')}}{{ mdData.distance }}</text
            >
            <text class="point" v-if="mdData.distance"></text>
            <text class="detail">{{ mdData.address }}</text>
          </view>
        </view>
      </view>
      <view class="split-line" v-if="showFreight"></view>
      <!-- 运费 -->
      <view class="freight-row" v-if="showFreight">
        <view class="row-label">{{$t('goods.freight')}}</view>
        <view class="row-content" v-if="is_area == 1">{{
          $t("goods.areaLimit")
        }}</view>
        <view class="row-content" v-else>{{
          freight ? freight : $t("goods.free")
        }}</view>
      </view>
      <!-- 服务列表 -->
      <view
        class="ensure-section"
        :style="[ensureBorder]"
        v-if="goodsInfo.service_list.length"
      >
        <view
          class="ensure-item"
          v-for="(item, index) in goodsInfo.service_list"
          :key="index"
        >
          <i class="iconfont icon-success"></i>
          <text>{{ item }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { diySysPageMixin } from "@/components/diySystemPage/mixins/index.js";

export default {
  name: "",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
    goodsInfo: {
      type: Object,
      default: {},
    },
    skuText: {
      type: String,
      default: "",
    },
    mdId: {
      type: String,
      default: "0",
    },
    mdData: {
      type: Object,
      default: {},
    },
    addressList: {
      type: Array,
      default: [],
    },
  },
  mixins: [diySysPageMixin],
  components: {},
  data() {
    return {
      // sku选择框
      show: false,
      // 收获地址信息
      address: null,
      // 运费
      freight: 0,
      // 门店信息
      shop: null,
      // 区域限制购买
      is_area: 0,
    };
  },
  mounted() {
    if (!this.addressList.length) return;
    let [data] = this.addressList.filter((d) => {
      return d.is_default == 1;
    });
    if (data) {
      this.address = data;
    }
  },
  watch: {},
  computed: {
    showAddress() {
      return this.propsData.params.showAddress;
    },
    showNearbyShop() {
      return this.propsData.params.showNearbyShop;
    },
    showFreight() {
      // return this.propsData.params.showFreight;
      return false;
    },
    productType() {
      return this.goodsInfo.product_type;
    },
    ensureBorder() {
      return {
        borderRadius: `0 0 ${this.outModuleCss.borderRadius} ${this.outModuleCss.borderRadius}`,
      };
    },
  },
  methods: {
    // 点击选择sku
    chooseSku() {
      this.$emit("chooseSku");
    },
    // 获取收获地址门店运费信息
    async getInfo() {
      try {
        var address = uni.getStorageSync("SELECT_ORDER_ADDRESS");
        var shop = uni.getStorageSync("order_select_shop");
        var param = {
          id: this.goodsInfo.id,
          address_id: address ? JSON.parse(address).id : 0,
          shop_id: shop ? JSON.parse(shop).id : 0,
        };
        const res = await this.$allrequest.goods.getAddressInfo(param);
        if (res.code == 0) {
          this.freight = res.data.express_price;
          this.shop = res.data.shop;
          this.is_area = res.data.is_area;
        }
      } catch (e) {}
    },
    updateAddress() {
      let address = uni.getStorageSync("SELECT_ORDER_ADDRESS");
      if (address) {
        address = JSON.parse(address);
        this.address = address;
      } else {
        this.address = null;
      }
    },
    gotoAddressList() {
      this.$emit("gotoAddressList");
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-attribute {
  width: 100%;
  position: relative;
  font-family: PingFang SC;
  .attribute-section {
    width: 100%;
    padding-top: 4.8vw;
    .sku-row {
      width: 100%;
      display: flex;
      align-items: flex-start;
      padding-left: 4.8%;
      .row-label {
        width: 82rpx;
        font-size: 26rpx;
        font-weight: 600;
        color: #262626;
      }
      .row-content {
        flex: 1;
        display: flex;
        align-items: flex-start;
        padding-right: 4.8vw;
        padding-bottom: 4vw;
        .selected-sku {
          flex: 1;
          font-size: 26rpx;
          font-weight: 400;
          color: #262626;
        }
        .iconfont {
          font-size: 22rpx;
          color: #000000;
        }
      }
    }
    .split-line {
      width: 84.26%;
      height: 1px;
      background: #f6f6f6;
      float: right;
    }
    .address-row {
      width: 100%;
      display: flex;
      align-items: center;
      padding: 4.8vw 0 0 4.8vw;
      .row-label {
        width: 82rpx;
        font-size: 26rpx;
        font-weight: 600;
        color: #262626;
      }
      .row-content {
        display: flex;
        align-items: center;
        padding-right: 4.8vw;
        width: 87.6%;
        justify-content: space-between;
        .address-info {
          font-size: 26rpx;
          font-weight: 400;
          color: #262626;
          display: flex;
          align-items: center;
          width: 91.6%;
          .iconfont {
            font-size: 30rpx;
            color: #f8260a;
            font-weight: 500;
            margin-right: 4rpx;
          }
          text {
            max-width: 93.52%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .info-text {
            white-space: nowrap;
            width: 70vw;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .iconfont {
          font-size: 22rpx;
          color: #000000;
        }
      }
      .add-bottom {
        padding-bottom: 3.67vw;
      }
    }
    .send-info {
      width: 100%;
      display: flex;
      align-items: center;
      padding-left: 4.8%;
      .row-label {
        width: 82rpx;
        font-size: 26rpx;
        font-weight: 600;
        color: #262626;
      }
      .row-content {
        flex: 1;
        display: flex;
        align-items: center;
        padding-right: 4.8vw;
        font-size: 26rpx;
        font-weight: 400;
        color: #262626;
        padding-bottom: 4.8vw;
        text:nth-child(1) {
          color: #fa230a;
          padding: 0;
          background: none;
        }
      }
    }
    .shop-info {
      width: 100%;
      display: flex;
      align-items: flex-start;
      padding: 4.8vw 0 3.67vw 4.8vw;
      .row-label {
        width: 82rpx;
        font-size: 26rpx;
        font-weight: 600;
        color: #262626;
      }
      .row-content {
        flex: 1;
        padding-right: 4.8vw;
        position: relative;
        top: -2rpx;
        .shop-msg {
          display: flex;
          align-items: center;
          flex: 1;
          .top-msg {
            flex: 1;
            display: flex;
            align-items: center;
            font-size: 26rpx;
            font-weight: 400;
            color: #262626;
            .iconfont {
              font-size: 22rpx;
              color: #000000;
              font-weight: 500;
              margin-right: 4rpx;
            }
            .icon-store {
              font-size: 34rpx;
            }
            text {
              max-width: 68vw;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
        .address-detail {
          font-size: 24rpx;
          font-weight: 400;
          color: #8c8c8c;
          padding-left: 39rpx;
          max-width: 75vw;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: flex;
          align-items: center;
          .point {
            width: 2px;
            height: 2px;
            border-radius: 50%;
            background-color: #000000;
            margin: 0 2vw;
          }
        }
      }
    }
    .freight-row {
      width: 100%;
      display: flex;
      align-items: center;
      padding: 4.8vw 0 4.8vw 4.8vw;
      .row-label {
        width: 82rpx;
        font-size: 26rpx;
        font-weight: 600;
        color: #262626;
      }
      .row-content {
        flex: 1;
        display: flex;
        align-items: flex-start;
        padding-right: 4.8vw;
        font-size: 26rpx;
        font-weight: 400;
        color: #262626;
      }
    }
    .ensure-section {
      width: 100%;
      padding: 2.67vw 4.8vw;
      display: flex;
      flex-wrap: wrap;
      background: #fbfcfb;
      .ensure-item {
        display: flex;
        align-items: center;
        margin: 2rpx 4.26vw 2rpx 0;
        .iconfont {
          color: #8c8c8c;
          margin-right: 4rpx;
        }
        text {
          font-size: 22rpx;
          font-weight: 400;
          color: #8c8c8c;
        }
      }
    }
  }
  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
